<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path;
%>
<!DOCTYPE html>
<html>
<body class="skin-blue">
<!-- header logo: style can be found in header.less -->

<!-- getHeader -->
<s:action name="getHeader" namespace="/privilege" executeResult="true"/>
<div class="wrapper row-offcanvas row-offcanvas-left">

    <!-- getMenus -->
    <s:action name="getMenus" namespace="/privilege" executeResult="true"/>

    <!-- Right side column. Contains the navbar and content of the page -->
    <aside class="right-side">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>运营数据
                <small>医生接单情况汇总</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
                <li><a href="#">Tables</a></li>
                <li class="active">Data tables</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">

                        <div class="box">

                            <div class="box-body">

                                <form action="javascript:searchUser();" class="form-inline" name="searchForm">
                                 <div class="row"  align="center">

										<div class="col-md-4">
									     <div class="right col-xs-3 text-right">
									        <label for="">医生号码:</label>
									    </div>
									     <div class="right col-xs-6 text-left">
									          <input type="text" id="stuffNo"  class="form-control" style="width: 170px" placeholder="PHONE">
									    </div>
										</div>
										<div class="col-md-4">
									     <div class="right col-xs-3 text-right">
									        <label for="">医生姓名:</label>
									    </div>
									     <div class="right col-xs-6 text-left">
									          <input type="text" id="stuffName"  class="form-control" style="width: 170px" placeholder="NAME">
									    </div>
										</div>
                                  </div>
                                    <br/>
                              <div class="row"  >
                   
                   
                   
						     <div class="col-md-4">
						     <div class="right col-xs-3 text-right">
						        <label for="">起始时间:</label>
						    </div>
						     <div class="right col-xs-6 text-left">
						        <div class="input-group">
						          <input type="text" class="form-control form_datetime" value="${search.orderCreateTimeStart}" id="orderCreateTimeStart" name="orderCreateTimeStart"  placeholder="">
						          <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></span>
						        </div>
						    </div>
						    </div>
						    
						    <div class="col-md-4">
						     <div class="right col-xs-3 text-right">
						        <label for="">结束时间:</label>
						    </div>
						    <div class="right col-xs-6 text-left">
						        <div class="input-group">
						          <input type="text" class="form-control form_datetime" value="${search.orderCreateTimeEnd}" id="orderCreateTimeEnd" name="orderCreateTimeEnd"  placeholder="">
						          <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></span>
						        </div>
						    </div>
						    </div>
						    
					
						    </div>
                                    <br/>
                                   <div class="row" align="center">
                                    <button type="submit" class="btn btn-info">查询</button>
                                    </div>
                                </form>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                    
                    
                     <div class="nav-tabs-custom">
                                <!-- Tabs within a box -->
                                <ul class="nav nav-tabs pull-right">
                                	 <li><a href="#chart_div" data-toggle="tab">图表</a></li>
                                    <li class="active"><a href="#table_div" data-toggle="tab">列表</a></li>
                                   
                                </ul>
                                <div class="tab-content no-padding">
                                	<br/>
                                    <!-- Morris chart - Sales -->
                                    <div class="tab-pane active" id="table_div" style="position: relative;min-height: 900px">
                                   		 
                                   		 <form method="post" target="_self" action="" name="listForm">
                          			  		<div class="box-body table-responsive" id="listDiv"><s:property value="res" escape="false"/> </div>
                       					 </form>
                       					 
                                    </div>
                                    <div class="tab-pane" id="chart_div" style=" position: relative;min-height: 900px">
                               		    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
                               		    <div id="container1" class="col-md-6" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
                               		   	<div id="container2" class="col-md-6"  style="min-width: 400px; height: 400px; margin: 0 auto"></div>
                                    </div>
                                </div>
                     </div>
                </div>
            </div>

        </section><!-- /.content -->
    </aside><!-- /.right-side -->
</div><!-- ./wrapper -->
</body> 


<script type="text/javascript">


    //查询用户列表
    function searchUser() {


		  var start = $.trim($("#orderCreateTimeStart").val());
		  var end =  $.trim($("#orderCreateTimeEnd").val());
		  var stuffNo =  $.trim($("#stuffNo").val());
		  var stuffName =  $.trim($("#stuffName").val());
		  //private String stuffNo;


		  //private String stuffName;
		  
		  if(''==start){
			alert("请输入开始时间!");

			return;
		  }

		  if(''==end){
				alert("请输入结束时间!");

				return;
		  }

		  if(''!=stuffNo&&stuffNo.length!=11){
				alert("电话号码不正确!");
				return;
		  }
	    	
          listTable.filter['orderCreateTimeStart'] = start;
          listTable.filter['orderCreateTimeEnd'] = end;
          listTable.filter['stuffNo'] = stuffNo;
          listTable.filter['stuffName'] = stuffName;
		
         listTable.action = "<%=basePath%>/report/ajaxQueryOrderReportStuff.action";

         listTable.loadList();      
        $("#listDiv").listview('refresh');
    }

    function buttonSubmit(obj,type){

	   var name = $(obj).parents().parents().children('td:eq(0)').text().trim()
	   var id = $(obj).parents().parents().children('td:eq(5)').text().trim()
 	   var start = $.trim($("#orderCreateTimeStart").val());
	   var end =  $.trim($("#orderCreateTimeEnd").val());
	   
 	   listTable.filter['orderCreateTimeStart'] = start;
       listTable.filter['orderCreateTimeEnd'] = end;

       listTable.filter['accepterid'] = id;
       listTable.filter['accepterName'] = name;

	  if(type==1){
          listTable.action = "<%=basePath%>/report/ajaxorderReportStuffDailyType.action";
          listTable.loadList();   

	  }else if(type==2){

		 listTable.action = "<%=basePath%>/report/ajaxOrderReportStuffDailyChannel.action";
	     listTable.loadList();   
	  }else{
		alert("系统错误！");
	   } 
    }
    //折线图
    function paintPie(json){
    	$("#container").hide();
    	 $("#container1").show();
    	 $("#container2").show();
    	var rowd1 = new Array();

    	if(json[0].orderfeetypeid==0){
	      	for(var i=1;i<json.length;i++){
	      			rowd1[i-1]= json[i].registerCount;
	      			
	      	}
	   }else{
		 	for(var i=0;i<json.length;i++){
      			clumd[i] = json[i].accepterName;
      			rowd1[i]= parseInt(json[i].registerCount);
      			rowd2[i]= parseInt(json[i].registerTotal);
      			rowd3[i]= parseInt(json[i].registerPayoffTotal);
      		}
      	}
    	
	    Highcharts.chart('container1', {
	        chart: {
	            plotBackgroundColor: null,
	            plotBorderWidth: null,
	            plotShadow: false,
	            type: 'pie'
	        },
	        title: {
	            text: '入口/类型'
	        },
	        tooltip: {
	            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	        },
	        plotOptions: {
	            pie: {
	                allowPointSelect: true,
	                cursor: 'pointer',
	                dataLabels: {
	                    enabled: true,
	                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
	                    style: {
	                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
	                    }
	                }
	            }
	        },
	        series: [{
	            name: 'Brands',
	            colorByPoint: true,
	            data: [{
	                name: '选项1',
	                y: 10
	            }, {
	                name: '选项2',
	                y: 20,
	                sliced: true,
	                selected: true
	            }, {
	                name: '选项3',
	                y: 10
	            }]
	        }]
	    });


	    Highcharts.chart('container2', {
	        chart: {
	            plotBackgroundColor: null,
	            plotBorderWidth: null,
	            plotShadow: false,
	            type: 'pie'
	        },
	        title: {
	            text: '日期'
	        },
	        tooltip: {
	            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	        },
	        plotOptions: {
	            pie: {
	                allowPointSelect: true,
	                cursor: 'pointer',
	                dataLabels: {
	                    enabled: true,
	                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
	                    style: {
	                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
	                    }
	                }
	            }
	        },
	        series: [{
	            name: 'Brands',
	            colorByPoint: true,
	            data: [{
	                name: '选项1',
	                y: 10
	            }, {
	                name: '选项2',
	                y: 20,
	                sliced: true,
	                selected: true
	            }, {
	                name: '选项3',
	                y: 10
	            }]
	        }]
	    });
    }
    //折线图
    function paintClumn(json){

       	$("#container").show();
   		$("#container1").hide();
   	 	$("#container2").hide();
    	var clumd = new Array();
      	var rowd1 = new Array();
      	var rowd2 = new Array();
      	var rowd3 = new Array();
      	if(json[0].accepterid==0){
	      	for(var i=1;i<json.length;i++){
	      			clumd[i-1] = json[i].accepterName;
	      			rowd1[i-1]= json[i].registerCount;
	      			rowd2[i-1]= json[i].registerTotal;
	      			rowd3[i-1]= json[i].registerPayoffTotal;
	      	}
	   }else{
		 	for(var i=0;i<json.length;i++){
      			clumd[i] = json[i].accepterName;
      			rowd1[i]= parseInt(json[i].registerCount);
      			rowd2[i]= parseInt(json[i].registerTotal);
      			rowd3[i]= parseInt(json[i].registerPayoffTotal);
      		}
      	}

      	Highcharts.chart('container', {

      	    title: {
      	        text: '医生接单情况汇总 '
      	    },

      	    subtitle: {
      	        text: '当前列表内'
      	    },

      	    yAxis: {
      	        title: {
      	            text: '笔数(金额)'
      	        }
      	    },
      	    legend: {
      	        layout: 'vertical',
      	        align: 'right',
      	        verticalAlign: 'middle'
      	    },

            xAxis: {
                categories: clumd,
                title: {
                    text: '医师'
                },
               labels:{
               		rotation: 90
               }
            }, 
      	    series: [{
      	        name: '订单笔数',
      	        data: rowd1
      	    }, {
      	        name: '订单金额',
      	        data: rowd2
      	    }, {
      	        name: '支付工费',
      	        data:rowd3
      	    }]

      	});
    }
</script>

<head>
   <meta charset="UTF-8">
    <title>AdminLTE | Data Tables</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <script type="text/javascript" src="<%=basePath%>/js/admin/utils.js"></script>
    <script type="text/javascript" src="<%=basePath%>/js/base/listtable.js"></script>
    <link href="<%=basePath%>/AdminLTE/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    <script type="text/javascript" src="<%=basePath%>/AdminLTE/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="<%=basePath%>/AdminLTE/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <script type="text/javascript" src="<%=basePath%>/AdminLTE/js/highcharts.js"></script>
</head>

<script type="text/javascript">
    $('.form_datetime').datetimepicker({
    	minView: "month", 
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1,
        autoclose: true,
        format: 'yyyy-mm-dd',
        language: 'zh-CN',
    });
</script>

</html>